<template>
  <ContentWrap>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="租赁宗地序号">
        {{ formData.landIds }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="续签合同序号">
        {{ formData.parentId }}
      </el-descriptions-item> -->
      <el-descriptions-item label="合同编号">
        {{ formData.contractNo }}
      </el-descriptions-item>
      <el-descriptions-item label="出租金额">
        {{ formData.rentPrice }}
      </el-descriptions-item>
      <el-descriptions-item label="开始时间">
        {{ formData.startTime }}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        {{ formData.endTime }}
      </el-descriptions-item>
      <el-descriptions-item label="出租位置">
        {{ formData.rentLocation }}
      </el-descriptions-item>
      <el-descriptions-item label="租赁土地面积">
        {{ formData.rentLandarea }}
      </el-descriptions-item>
      <el-descriptions-item label="租赁建筑面积">
        {{ formData.rentBuildingarea }}
      </el-descriptions-item>
      <el-descriptions-item label="出租方式">
        <dict-tag :type="DICT_TYPE.RENT_TYPE" :value="formData.rentType" />
      </el-descriptions-item>
      <el-descriptions-item label="合同签订日期">
        {{ formData.signingDate }}
      </el-descriptions-item>
      <el-descriptions-item label="约定交款日期">
        {{ formData.payDate }}
      </el-descriptions-item>
      <el-descriptions-item label="上次交款日期">
        {{ formatDate(formData.paidDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item label="下次交款日期">
        {{ formData.nextpayDate }}
      </el-descriptions-item>
      <el-descriptions-item label="有效状态">
        <dict-tag :type="DICT_TYPE.SYS_STATUS" :value="formData.effective" />
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        {{ formData.remark }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 子表的表单 -->
    <el-tabs v-model="subTabsName">
      <el-tab-pane label="租赁合同档案" name="rentFile">
        <RentFileForm ref="rentFileFormRef" :belong-id="scope.row.id" />
      </el-tab-pane>
      <el-tab-pane label="宗地信息" name="land">
        <LandForm ref="landFormRef" :land-ids="formData.landIds" />
      </el-tab-pane>
      <el-tab-pane label="年度收益" name="earnings">
        <EarningsForm ref="earningsFormRef" :rent-id="formData.id" />
      </el-tab-pane>
      <el-tab-pane label="承租人信息" name="lessee">
        <LesseeForm ref="lesseeFormRef" :rent-id="formData.id" />
      </el-tab-pane>
      <el-tab-pane label="租金税费管理" name="taxation">
        <TaxationForm ref="taxationFormRef" :rent-id="formData.id" />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { RentApi } from '@/api/zszx/rent'
import RentFileForm from '@/views/zszx/rent/components/RentFileForm.vue'
import LesseeForm from '@/views/zszx/rent/components/LesseeForm.vue'
import TaxationForm from '@/views/zszx/rent/components/TaxationForm.vue'
import EarningsForm from '@/views/zszx/rent/components/EarningsForm.vue'
import LandForm from '@/views/zszx/rent/components/LandForm.vue'
// import LesseeForm from './detailcomponents/LesseeForm.vue'
// import TaxationForm from './detailcomponents/TaxationForm.vue'
// import EarningsForm from './detailcomponents/EarningsForm.vue'
// import LandForm from './detailcomponents/LandForm.vue'
// import RentFileForm from './detailcomponents/RentFileForm.vue'

defineOptions({ name: 'BpmOALeaveDetail' })

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const formLoading = ref(false) // 表单的加载中
// const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

const formData = ref({
  id: undefined,
  processInstanceId: undefined,
  parentId: undefined,
  proposerId: undefined,
  status: undefined,
  effective: null,
  landIds: '',
  userId: undefined,
  contractNo: undefined,
  rentPrice: undefined,
  rentPeriod: undefined,
  startTime: undefined,
  endTime: undefined,
  rentLocation: undefined,
  rentLandarea: undefined,
  rentBuildingarea: undefined,
  rentType: null,
  signingDate: undefined,
  payDate: undefined,
  paidDate: null,
  nextpayDate: undefined,
  remark: undefined
})
const formRules = reactive({
  landIds: [{ required: true, message: '租赁宗地序号不能为空', trigger: 'blur' }],
  contractNo: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
  rentPrice: [{ required: true, message: '出租金额不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
  payDate: [{ required: true, message: '约定交款日期不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 子表的表单 */
const subTabsName = ref('rentFile')
const lesseeFormRef = ref()
const taxationFormRef = ref()
const earningsFormRef = ref()
const landFormRef = ref()
const rentFileFormRef = ref()

/** 获得数据 */
const getInfo = async () => {
  formLoading.value = true
  try {
    // detailData.value = await LeaveApi.getLeave(props.id || queryId)
    formData.value = await RentApi.getRent(props.id || queryId)
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>
